<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="icon" href="../static/images/elm.ico" type="image/x-icon"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>饿了么数据分析地址</title>
    <!-- 引入 Bootstrap -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body style = " background-image:url('../static/images/bg2.jpg');height: auto;">
      <div class="container-full-about" style="height: 500px;">
        <div class="span12" style="padding-top: 50px;">
            <h1 style="text-align: center; color: rgb(255, 255, 255); ">
                饿了么数据分析系统
            </h1>
        </div>
        <div class="container" style="margin-top: 50px;">
            <div class="span12">
                <div>
                    <div class="col-xs-4 col-md-4" >                      
                    </div>
                    <div class="col-xs-4 col-md-4" >
                        <input id="find_address" type="text" class="form-control" name="address" placeholder="请输入地址" >
                    </div>
                    <div class="col-xs-2 col-md-2" >
                        <input id="find_address_btn" class="btn btn-primary" type="submit"  >
                    </div>
                 </div>
            </div>
        </div>  
        <div class="container" style="margin-top: 20px;">
            
            <div class="span12">
                <div>
                    <div class="col-xs-4 col-md-4" >                      
                    </div>
                    <div class="col-xs-4 col-md-4 " >
                        <h4 style="color: white;">选择地址：</h4>
                        <select id="select-address" name="select-address" style="width: 100%;" class="form-control">
                            <option selected="selected">暂无地址</option>
                        </select>
                        <br>
                        <div class="col-xs-12 col-md-12 " style="text-align: center;">
                            <button id="address_submit_btn" type="submit" class="btn btn-primary " style="align-items: center;">确定</button>
                        </div>
                    </div>
                 </div>
            </div>
        </div>  
    </div>
    <div class="container" style="text-align: center;color:black; font-size: 15px;">
        <p>Copyright:  FJNU</p>
    </div>
    <!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
    <script src="https://code.jquery.com/jquery.js"></script>
    <script>
        let longitude,latitude,address;
        $(document).on('click','#find_address_btn',function () {
            let address = $('#find_address').val();
            $.ajax({
                type:'GET',
                url: 'find_nearby_address',
                data: {
                    'address': address
                },
                datatype:'json',
                success:function (res) {
                    $("#select-address").empty();
                    $("#select-address").append('<option value="0">请选择地址</option>');
                    $.each(res,function (index, obj) {
                        $("#select-address").append('<option data-longitude="'+ obj.longitude + '" data-latitude="'+ obj.latitude +'">'+ obj.address +'</option>');
                    });
                }
            });
        });
        $(document).on('change','#select-address',function () {
            let option_selected = $(this).find("option:selected");
            longitude = option_selected.attr("data-longitude");
            latitude = option_selected.attr("data-latitude");
            address = option_selected.text()
        });
        $(document).on('click','#address_submit_btn',function(){
            window.location = "/shop?longitude=" + longitude + "&latitude=" + latitude + "&address=" + address + "&page=1";
        });
    </script>
</body>
</html>